{% extends "base_generic.html" %}

{% block content %}
    <h1>图书列表</h1>

    {% if book_list %}
    <ul>

      {% for book in book_list %}
      <li>
        <div class="card h-100">
            {% if book.cover_image %}
                <img src="{{ book.cover_image.url }}" class="card-img-top" alt="{{ book.title }}">
            {% else %}
                <div class="bg-light text-center p-4"><i class="fas fa-book-open fa-5x text-muted"></i></div>
            {% endif %}
            <div class="card-body">
                <h5 class="card-title">{{ book.title }}</h5>
                <h6 class="card-subtitle mb-2 text-muted"><i class="fas fa-user-pen me-1"></i> {{ book.author }}</h6>
                <p class="card-text text-truncate-2">{{ book.summary }}</p>
                <div class="d-flex align-items-center mb-2">
                    <div class="star-rating me-2">
                        {% for i in "12345"|make_list %}
                            {% if forloop.counter <= book.average_rating|floatformat:0 %}
                                <i class="fas fa-star text-warning"></i>
                            {% else %}
                                <i class="far fa-star text-warning"></i>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <small class="text-muted">({{ book.rating_count }})</small>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <a href="{% url 'book-detail' book.id %}" class="btn btn-sm btn-primary"><i class="fas fa-info-circle me-1"></i> 查看详情</a>
                    <span class="badge bg-secondary"><i class="fas fa-bookmark-check me-1"></i> {{ book.borrow_count }} 次借阅</span>
                </div>
            </div>
            <div class="card-footer bg-transparent">
                <small class="text-muted">
                    {% if book.language %}<i class="fas fa-language me-1"></i> {{ book.language }}{% endif %}
                    {% if book.genre.all %} <i class="fas fa-tags ms-2 me-1"></i> {{ book.genre.all|join:", " }}{% endif %}
                </small>
            </div>
        </div>
      </li>
      {% endfor %}

    </ul>

    {% else %}
      <p>图书馆中没有图书。</p>
    {% endif %}       
{% endblock %}
<div class="card h-100">
    {% if book.cover_image %}
        <img src="{{ book.cover_image.url }}" class="card-img-top" alt="{{ book.title }}">
    {% else %}
        <div class="bg-light text-center p-4"><i class="fas fa-book-open fa-5x text-muted"></i></div>
    {% endif %}
    <div class="card-body">
        <h5 class="card-title">{{ book.title }}</h5>
        <h6 class="card-subtitle mb-2 text-muted"><i class="fas fa-user-pen me-1"></i> {{ book.author }}</h6>
        <p class="card-text text-truncate-2">{{ book.summary }}</p>
        <div class="d-flex align-items-center mb-2">
            <div class="star-rating me-2">
                {% for i in "12345"|make_list %}
                    {% if forloop.counter <= book.average_rating|floatformat:0 %}
                        <i class="fas fa-star text-warning"></i>
                    {% else %}
                        <i class="far fa-star text-warning"></i>
                    {% endif %}
                {% endfor %}
            </div>
            <small class="text-muted">({{ book.rating_count }})</small>
        </div>
        <div class="d-flex justify-content-between align-items-center">
            <a href="{% url 'book-detail' book.id %}" class="btn btn-sm btn-primary"><i class="fas fa-info-circle me-1"></i> 查看详情</a>
            <span class="badge bg-secondary"><i class="fas fa-bookmark-check me-1"></i> {{ book.borrow_count }} 次借阅</span>
        </div>
    </div>
    <div class="card-footer bg-transparent">
        <small class="text-muted">
            {% if book.language %}<i class="fas fa-language me-1"></i> {{ book.language }}{% endif %}
            {% if book.genre.all %} <i class="fas fa-tags ms-2 me-1"></i> {{ book.genre.all|join:", " }}{% endif %}
        </small>
    </div>
</div>

